<script lang="ts" setup>
import { computed } from 'vue'
import { UploadInstance, UploadProps } from 'element-plus'
import { UploadFilled, Close } from '@element-plus/icons-vue'

const $baseMessage = inject('$baseMessage') as any
const isUpload = ref(false)
const baseUrl = `${import.meta.env.VITE_APP_BASE_URL}`

const emit = defineEmits(['update:modelValue'])
const uploadRef = ref<UploadInstance>()
const props = withDefaults(
  defineProps<{
    multiple?: boolean
    modelValue: string[] | string
    accept?: string
  }>(),
  {
    multiple: false,
    accept: '',
  }
)

const handleBeforeUpload: UploadProps['beforeUpload'] = () => {
  isUpload.value = true
  return true
}

const handleUploadSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  const { url } = response
  if (props.multiple) {
    const arr = [...(props.modelValue ?? []), url]
    fileUrl.value = arr
    const _arr = [
      ..._fileUrl.value,
      {
        url,
        name: uploadFile.name,
      },
    ]
    _fileUrl.value = _arr
  } else {
    fileUrl.value = url
    _fileUrl.value = [
      {
        url,
        name: uploadFile.name,
      },
    ]
  }
  isUpload.value = false
  $baseMessage('上传成功', 'success', 'hey')
}

const handleUploadError: UploadProps['onError'] = () => {
  isUpload.value = false
  $baseMessage('上传失败', 'error', 'hey')
}
const handleDelete = (index?: number) => {
  if (props.multiple && index != undefined) {
    const arr = [...fileUrl.value]
    arr.splice(index, 1)
    fileUrl.value = arr
    const _arr = [..._fileUrl.value]
    _arr.splice(index, 1)
    _fileUrl.value = _arr
  } else {
    fileUrl.value = ''
    _fileUrl.value = []
  }
}

const _fileUrl = ref<
  {
    name: string
    url: string
  }[]
>([])

const fileUrl = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  },
})
</script>

<template>
  <div class="flex flex-wrap flex-col w-250px overflow-hidden">
    <el-upload
      ref="uploadRef"
      :accept="accept"
      :action="`${baseUrl}/api/ossPut`"
      :before-upload="handleBeforeUpload"
      class="w-full"
      :disabled="isUpload"
      drag
      :on-error="handleUploadError"
      :on-success="handleUploadSuccess"
      :show-file-list="false"
    >
      <div class="flex-center flex-col min-h-70px max-h-100px">
        <el-icon class="text-30px"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将文件拖到此处或
          <em>点击上传</em>
        </div>
      </div>
    </el-upload>
    <div v-show="fileUrl.length" class="w-full flex-1 flex flex-wrap flex-col">
      <div v-for="(item, index) in _fileUrl" :key="item.url" class="w-full">
        <div class="flex items-center justify-between">
          <span class="flex-1 truncate">{{ item.name }}</span>
          <div class="flex items-center ml-10px cursor-pointer">
            <el-icon @click.stop="() => handleDelete(index)"><Close /></el-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
